<template>
	<view class='login'>
		<view class='pageBg imgPublic'>
			<image src='https://wx.gdxixiashi.com/public/images/person/login_bj@2x.png'></image>
		</view>
		<view class='content dFlex flexDirection jStart_aCenter'>
			<view class="logo imgPublic">
				<!-- <image src="../static/logo.png" mode="widthFix"></image> -->
			</view>
			<!-- <button class='btn sure' open-type="getPhoneNumber" @getphonenumber.stop="getPhoneNumber">确定</button> -->
			<!-- <view class="loginBtn dFlex jCenter_aCenter" @tap='wxLogin'>
				<view class="wxIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/person/login_weixin@2x.png" mode="widthFix"></image>
				</view>
				<text>微信登录</text>
			</view> -->
			<view class="spreadCode dFlex jCenter_aCenter" v-if="scareFlag || is_spread == '1'">
				<input type="text" v-model="spreadId" placeholder="请输入邀请码">
			</view>
			<view class="loginBtn dFlex jCenter_aCenter" open-type="getPhoneNumber" v-if="is_spread == '1'" @tap='bindSpread'>
				<!-- <view class="wxIcon imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/person/login_weixin@2x.png" mode="widthFix"></image>
				</view> -->
				<text>绑定推荐人</text>
			</view>
			<view class="loginBtn dFlex jCenter_aCenter" v-if="is_spread == '2' && !flag" @click="goLogin">
				<text>快捷登录</text>
			</view>
			<view class="loginBtn dFlex jCenter_aCenter" v-if="is_spread == '2' && flag" @click="getPhoneNumber">
				<text>快捷登录</text>
			</view>
			<view class="unlogin" @click="goHome">暂不登录，我再看看~</view>
			<!-- <button class="loginBtn dFlex jCenter_aCenter" open-type="getPhoneNumber" v-if="is_spread == '2' && flag" @getphonenumber.stop="getPhoneNumber">
				<text>手机号快捷登录</text>
			</button> -->
			<view class="protocal dFlex jCenter_aCenter+">
				<view class="statusIcon imgPublic" @tap='flag = !flag'>
					<image v-if="!flag" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
					<image v-if="flag" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
				</view>
				<view class="showTxt">已阅读并同意<view class="txt" @tap='goPage(6,1)'>用户协议</view>和<view class="txt" @tap='goPage(7,2)'>隐私政策</view></view>
			</view>
		</view>
		<!-- 获取头像昵称 -->
		<view class="zz dFlex jCenter_aCenter" v-if="infoFlag">
			<view class="userInfo">
				<view class="title dFlex jBetween_aCenter">
					<view class="closeIcon imgPublic"></view>
					<view class="tit">设置头像昵称</view> 
					<view class="closeIcon imgPublic" @tap.stop='back'>
						<image src="../static/images/closeIcon.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="line dFlex flexDirection jCenter_aCenter+" style="border: none;">
					<button open-type="chooseAvatar" @chooseavatar="chooseTx" class="tx imgPublic">
						<image :src="image_head"></image>
					</button>
					<view class="toast">点击设置头像</view>
				</view>
				<view class="line dFlex jCenter_aCenter">
					<input type="nickname" v-model="nickName" @change='getUserName' placeholder="请输入或选择微信昵称">
				</view>
				<view class="btn" @tap='backHome'>确定</view>
			</view>
		</view>
		<!-- 绑定手机号 -->
		<view class="zz dFlex jCenter_aCenter" v-if="phoneFlag">
			<view class="appendMy">
				<view class="title">绑定手机</view>
				<view class='phone_content dFlex jCenter_aCenter'>
					洗匣士申请获取您的手机号码
				</view>
				<view class="btns dFlex jBetween_aCenter">
					<view class='btn' @tap='loginhome'>取消</view>
					<button class='btn sure' open-type="getPhoneNumber" @getphonenumber.stop="getPhoneNumber0">确定</button>
				</view>
			</view>
		</view>
		<!-- 隐私政策 -->
		<view class="zz dFlex jCenter_aCenter flexDirection" v-if="privacy">
			<view class="privacy">
				<view class="privacy_content">
					<view class="title">隐私保护指引</view>
					<view class="des">
						在使用当前小程序服务之前，请仔细阅读<text class="link" @tap="openPrivacyContract">{{ privacyName }}</text>。如你同意{{privacyName }}，请点击“同意”开始使用。
					</view>
					<view class="btns dFlex jAround_aCenter">
						<button class="item reject" @tap="exitMiniProgram">拒绝</button>
						<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
							@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				code:'',
				nickName:'',
				image_head:'',
				infoFlag:false,
				phoneFlag:false,
				userId:'',
				//邀请码
				scareFlag:false,//是否是扫码进入
				spreadId:'',
				is_spread:2,// 1 需要绑定 2不需要绑定
				
				privacy:false,
				privacyName:'',
				
				flag:false,
			};
		},
		onLoad() {
			/* uni.getLocation({
				success: (locate) => {
					getApp().globalData.lat = locate.latitude;
					getApp().globalData.lng = locate.longitude;
				},
				fail:(err)=>{
					console.log(err);
					if(err.errno == '103' || err.errMsg == 'getLocation:fail auth deny' || err.errMsg == 'getLocation:fail:auth denied'){
						uni.showModal({
							title:'授权提示',
							content:'洗户匣申请使用您的位置信息以提供更好的服务,是否同意授权',
							success: (op) => {
								if(op.confirm){
									uni.openSetting();
								}
							}
						})
					}
				},
				complete: () => {
					
				},
			}) */
			this.wxLogin();
			uni.getPrivacySetting({
				success: (res) => {
					console.log(res);
					this.privacy = res.needAuthorization;
					this.privacyName = res.privacyContractName;
				},
			})
		},
		onShow(){
			this.spreadId = uni.getStorageSync('spreadId')?uni.getStorageSync('spreadId'):'';
			// this.scareFlag = uni.getStorageSync('spreadId')?false:true;
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			loginhome(){
				uni.switchTab({
					url:'/pages/home'
				})
			},
			goHome(){
				uni.navigateBack({
					delta:1
				})
			},
			goPage(idx,status){
				if(idx == '6' || idx == '7'){
					uni.navigateTo({
						url:'./xieyi?status='+status, 
					})
				}
			},
			checkPrivacySetting(){
				uni.getPrivacySetting({
				  success: res => {
						console.log("getPrivacySetting",res)
						// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
						  // 需要弹出隐私协议
							this.privacy = false
						} 
						//else {
							// this.privacy = true
						  // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
						  // wx.getUserProfile()
						  // wx.chooseMedia()
						  // wx.getClipboardData()
						  // wx.startRecord()
						// }
					  },
					  fail: () => {},
					  complete: () => {}
				})
			},
			// 打开隐私协议
			openPrivacyContract() {
				uni.openPrivacyContract({
					fail: () => {
						uni.showToast({
							title: '遇到错误',
							icon: 'error'
						})
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				const that = this;
				// 直接退出小程序
				// wx.exitMiniProgram()
				uni.showModal({
					// 如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?
					content: '您确定要拒绝吗?',
					success: res => {
						if (res.confirm) {
							that.privacy = false;
							uni.exitMiniProgram({
								success: () => {
									console.log('退出小程序成功');
								}
							});
						}
					}
				});
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				wx.requirePrivacyAuthorize({
					success: () => {
						// 用户同意授权
						// 继续小程序逻辑
						this.privacy = false
					},
					fail: () => {}, // 用户拒绝授权
					complete: () => {}
				})
			},
			// 微信登录
			wxLogin(){
				uni.login({
					provider:'weixin',
					success:(info)=>{
						this.code = info.code?info.code:'';
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'授权失败',
							icon:"none"
						})
					}
				})
			},
			// 绑定推荐人
			bindSpread(){
				if(!this.spreadId){
					uni.showToast({
						title:'邀请码不能为空',
						icon:"none"
					})
					return;
				}
				this.tool.getData('Regist/bindspread',{
					memberId:this.userId,
					spreadId:this.spreadId,
				}).then(res=>{
					console.log(res);
					if(res){
						uni.showToast({
							title:'绑定成功',
							icon:"success"
						})
						uni.setStorageSync('userId',res.memberId);
						getApp().globalData.userId = res.memberId;
						if(!this.image_head || !this.nickName){
							this.infoFlag = true;
						}else{
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/home'
								})
							},1650)
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			goLogin(){
				if(!this.flag){
					uni.showToast({
						title:'请先阅读并同意相关协议',
						icon:'none'
					})
					return;
				}
			},
			getPhoneNumber(e){
				this.tool.getData('Regist/weiLogin',{
					js_code:this.code,
					// encryptedData:e.detail.encryptedData,
					// iv:e.detail.iv,
					spreadId:this.spreadId,
				}).then(res=>{
					if(res){
						
						uni.setStorageSync('userId',res.memberId);
						if(uni.getStorageSync('spreadId')){
							uni.removeStorageSync('spreadId');
						}
						
						getApp().globalData.userId = res.memberId;
						
						this.userId = res.memberId;
						this.image_head = res.image_head;
						this.nickName = res.nickName;
						this.is_spread = res.is_spread;
						if(!res.tel){
							this.phoneFlag=true;
						}else{
							
							if(this.is_spread == '2'){
								if(!res.image_head || !res.nickName){
									this.infoFlag = true;
								}else{
									uni.showToast({
										title:'登录成功',
										icon:'success'
									})
									setTimeout(()=>{
										uni.switchTab({
											url:'/pages/home'
										})
									},1650)
								}
							}
						}
						
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 获取手机号码等信息
			getPhoneNumber0(e){
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					uni.switchTab({
						url:'/pages/home'
					})
				} else {
					this.wxLogin();
					uni.login({
						provider:'weixin',
						success:(info)=>{
							
							this.tool.getData('Regist/weiLogin',{
								js_code:info.code,
								encryptedData:e.detail.encryptedData,
								iv:e.detail.iv,
								spreadId:this.spreadId,
							}).then(res=>{
								if(res){
									uni.showToast({
										title:'登录成功',
										icon:'success'
									})
									this.phoneFlag=false;
									if(uni.getStorageSync('spreadId')){
										uni.removeStorageSync('spreadId');
									}
									
									uni.setStorageSync('userId',res.memberId);
									getApp().globalData.userId = res.memberId;
									
									this.userId = res.memberId;
									this.image_head = res.image_head;
									this.nickName = res.nickName;
									this.is_spread = res.is_spread;
									if(this.is_spread == '2'){
										if(!res.image_head || !res.nickName){
											this.infoFlag = true;
										}else{
											setTimeout(()=>{
												uni.switchTab({
													url:'/pages/home'
												})
											},1650)
										}
									}
									/* if(!res.image_head || !res.nickName){
										this.infoFlag = true;
									}else if(res.image_head && res.nickName){
										if(this.is_spread == '2'){
											setTimeout(()=>{
												uni.switchTab({
													url:'/pages/home'
												})
											},1650)
										}
									} */
								}
							}).catch(err=>{
								console.log(err);
							})
						},
						fail:(err)=>{
							console.log(err);
							uni.showToast({
								title:'授权失败',
								icon:"none"
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/home'
								})
							},1650)
						}
					})
					
				}
			},
			// 返回首页
			backHome(){
				if(!this.image_head || !this.nickName){
					uni.showToast({
						title:'头像和昵称不能为空',
						icon:"none"
					})
				}else{
					uni.switchTab({
						url:'/pages/home'
					})
				}
			},
			// 获取昵称
			getUserName(e){
				console.log(e);
				if(e.detail.value){
					this.nickName = e.detail.value;
					this.tool.getData('User/changeInfo',{
						memberId:this.userId,
						nickName:this.nickName,
					}).then(res=>{
						console.log(res);
						/* if(this.image_head){
							if(this.is_spread == '2'){
								uni.switchTab({
									url:'/pages/home'
								})
							}
						} */
					}).catch(err=>{
						console.log(err);
					})
				}
			},
			// 选择头像
			chooseTx(e){
				console.log(e);
				if(e){
					this.tool.upImg(e.detail.avatarUrl).then(res=>{
						if(res.image_path){
							this.tool.getData('User/changeInfo',{
								memberId:this.userId,
								image_head:res.image_path,
							}).then(res2=>{
								if(res2){
									this.image_head = getApp().globalData.imgDomain + res.image_path;
									/* if(this.nickName){
										if(this.is_spread == '2'){
											uni.switchTab({
												url:'/pages/home'
											})
										}
									} */
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				}
			},
			// 关闭信息设置弹窗
			back(){
				if(!this.image_head || !this.nickName){
					uni.showToast({
						title:'头像和昵称不能为空',
						icon:"none"
					})
					return
				}
				this.infoFlag = false;
				uni.navigateBack({
					delta:1,
					fail:()=>{
						uni.switchTab({
							url:'/pages/home'
						})
					}
				})
			}
		}
	}
</script>
 
<style lang="scss">
	page{
		height:100%;
		width: 100%;
	}
	.login{
		width: 100%;
		height:100%;
		position:relative;
		.zz{
			.appendMy{
				width: 86%;
				background: white;
				border-radius: 5px;
				overflow: hidden;
				.btns{
					width: 100%;
					border-top: 1px solid #DDDDDD;
					.btn{
						flex:1;
						text-align: center;
						color: #666666;
						padding: 12px 0;
						letter-spacing: 4px;
					}
					.sure{
						color: white;
						background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
					}
				}
				.phone_content{
					width: 100%;
					padding: 24px 0;
					box-sizing: border-box;
					text-align: center;
					font-size: 16px;
					font-weight: bold;
				}
				.title{
					width: 100%;
					padding: 16px 0;
					font-size: 18px;
					font-weight: bold;
					color: #666666;
					text-align:center;
				}
			}
			.userInfo{
				width: 80%;
				padding: 0 3% 24px;
				box-sizing: border-box;
				background: white;
				border-radius: 5px;
				.btn{
					width: 100%;
					padding: 12px 0;
					text-align: center;
					margin-top: 24px;
					background: linear-gradient(#609ff8 0%, #1664ff 100%);
					color: white;
					border-radius: 4px;
				}
				.line{
					width: 80%;
					margin: 10px auto 0;
					padding: 12px;
					box-sizing: border-box;
					border: 1px solid #cccccc;
					border-radius: 4px;
					text-align: center;
					input{
						text-align: center;
					}
					.toast{
						color: red;
						font-size: 12;
					}
					.tx{
						width: 60px;
						height: 60px;
						background: #999999;
						border-radius: 50%;
						overflow: hidden;
						margin-bottom: 10px;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.title{
					width: 100%;
					text-align: center;
					font-weight: bold;
					padding: 12px 0;
					.closeIcon{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		.content{
			width: 100%;
			height:100%;
			padding-top: 30%;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			.spreadCode{
				width: 60%;
				margin-bottom: 20px;
				background: white;
				border-radius: 50px;
				padding:8px 12px;
				box-sizing: border-box;
				border: 1px solid #c3c3c3;
				input{
					text-align: center;
				}
			}
			.protocal{
				width: 100%;
				font-size: 12px;
				margin-top: 12px;
				color:#afafaf;
				.statusIcon{
					width: 15px;
					height: 15px;
					margin-right: 8px;
				}
				.showTxt{
					width: 55%;
					.txt{
						display: inline-block;
						padding: 0 4px;
						font-weight: bold;
						color: #609ff8;
					}
				}
			}
			.unlogin{
				width: 100%;
				text-align: center;
				font-size: 12px;
				color: #666;
				padding: 12px 0;
			}
			.loginBtn{
				width: 74%;
				color: white;
				padding: 10px 0;
				border-radius: 50px;
				background: linear-gradient(#609ff8 0%, #1664ff 100%);
				box-shadow: 0px 4px 8px 0px rgba(96,159,247,0.24); 
				.wxIcon{
					width: 23px;
					height: 23px;
					margin-right: 8px;
				}
			}
			.logo{
				width: 100px;
				height: 100px;
				margin-bottom: 100px;
			}
		}
		.pageBg{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.privacy {
	     width: 90%;
		 background:white;
		 border-radius: 10px;
	     display: flex;
	     align-items: center;
	     justify-content: center;
	 }
	  
	 .privacy .privacy_content {
	     width: 100%;
	     padding: 48rpx;
		 height: auto;
	     box-sizing: border-box;
	     background: #fff;
	     border-radius: 16rpx;
	 }
	  
	 .privacy .privacy_content .title {
	     text-align: center;
	     color: #333;
	     font-weight: bold;
	     font-size: 32rpx;
	 }
	  
	 .privacy .privacy_content .des {
	     font-size: 26rpx;
	     color: #666;
	     margin-top: 40rpx;
	     text-align: justify;
	     line-height: 1.6;
	 }
	  
	 .privacy .privacy_content .des .link {
	     color: #07c160;
	     text-decoration: underline;
	 }
	  
	 .privacy .btns {
	     margin-top: 48rpx;
	     display: flex;
	 }
	  
	 .privacy .btns .item {
	     justify-content: space-between;
	     width: 244rpx;
	     height: 80rpx;
	     display: flex;
	     align-items: center;
	     justify-content: center;
	     border-radius: 16rpx;
	     box-sizing: border-box;
	     border: none;
	 }
	  
	 .privacy .btns .reject {
	     background: #f4f4f5;
	     color: #909399;
	 }
	  
	 .privacy .btns .agree {
	     background: #07c160;
	     color: #fff;
	 }
</style>
